/**
 * @file date-range
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {findDOMNode} from 'react-dom';
import {
  FormControl,
  InputGroup,
  Button
} from 'react-bootstrap';
import './date-range.scss';
import { DateRange } from 'react-date-range';
import * as moment from 'moment';
import {Overlay} from 'react-bootstrap';
import {getDialogContainer} from '../../util/helper'
import SimplePopOver from '../simple-popover/simple-popover';
const noop = () => {};

export default class MyDateRange extends PureComponent
{
  static propTypes = {
    className: PropTypes.string,
    placeholder: PropTypes.string,
  };

  static defaultProps = {
    zIndex: 999,
    direction: 'auto',
    theme: {
      PredefinedRanges : {
        marginRight: 10,
        marginTop: 10, float: 'right'
      }
    },
    onChange: (model) => console.log(model),
    ranges: {
      '今天': {
        startDate: (now) => {
          return now;
        },
        endDate: (now) => {
          return now;
        }
      },

      '昨天': {
        startDate: (now) => {
          return now.add(-1, 'days');
        },
        endDate: (now) => {
          return now.add(-1, 'days');
        }
      },

      '最近一周': {
        startDate: (now) => {
          return now.add(-7, 'days');
        },
        endDate: (now) => {
          return now;
        }
      },

      '最近一个月': {
        startDate: (now) => {
          return now.add(-30, 'days');
        },
        endDate: (now) => {
          return now;
        }
      },

      '最近三个月': {
        startDate: (now) => {
          return now.add(-90, 'days');
        },
        endDate: (now) => {
          return now;
        }
      }
    }
  };

  constructor(props) {
    super(props);

    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
    this.onSelect = this.onSelect.bind(this);
    this.getOffset = this.getOffset.bind(this);

    this.state = {
      open: false
    };
  }

  onSelect(value) {
    const format = this.props.format;
    this.props.onChange({
      startDate: value.startDate.format(format),
      endDate: value.endDate.format(format)
    });
  }

  open() {
    this.setState({
      open: true
    });
  }

  close() {
    this.setState({
      open: false
    });
  }

  getOffset(box) {
    const dom = findDOMNode(this).getBoundingClientRect();
    let x =  (dom.width - box.width) / 2;

    return {
      x,
      y: 10
    }
  }

  render() {
    const {
      placeholder,
      value,
      format,
      inputFormat,
      ranges,
      theme
    } = this.props;
    const open = this.state.open;
    const startViewValue = value ? moment(value.startDate, format).format(inputFormat) : '';
    const endViewValue = value ? moment(value.endDate, format).format(inputFormat) : '';

    return (
      <InputGroup className="date-range" ref="daterangepicker">
        <FormControl
          type="text"
          placeholder={placeholder}
          value={startViewValue}
          onChange={noop}
        />
        <InputGroup.Addon>到</InputGroup.Addon>
        <FormControl
          type="text"
          value={endViewValue}
          onChange={noop}
        />
        <InputGroup.Button>
          <button
            className="btn btn-default"
            onClick={this.open}
            type="button"
          >
            <i className="glyphicon glyphicon-calendar" />
          </button>
        </InputGroup.Button>

        {open ? (
          <Overlay
            container={() => findDOMNode(this)}
            placement="bottom"
            target={() => findDOMNode(this)}
            onHide={this.close}
            rootClose
            show
          >
            <SimplePopOver className="data-range-wrapper" offset={this.getOffset}>
              <div className="bootstrap-date-range-widget bottom pull-right">
                <DateRange
                  date={value}
                  format={format}
                  onChange={this.onSelect}
                  ranges={ranges}
                  theme={theme}
                  linkedCalendars
                />
              </div>
            </SimplePopOver>
          </Overlay>
        ) : null}
      </InputGroup>
    );
  }
}
